<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/qrcode.min.js"></script>
</head>

<body>
	<div id="container">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-if="isLogin">
						{{username}},欢迎您
					</div>
					<div class="menu-hd" v-else>
						亲，请<a href="login.html" target="_top" class="h">登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng">
						<a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
					</div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd">
						<a id="mc-menu-hd" href="shopcart.html" target="_top">
							<i class="am-icon-shopping-cart  am-icon-fw"></i>
							<span>购物车</span>
							<strong id="J_MiniCartNum" class="h"></strong>
						</a>
					</div>
				</div>
			</ul>
		</div>
		<!--悬浮搜索框-->
		<div class="nav white">
			<div class="logo"><img src="static/images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="static/images/logobig.png" /></li>
			</div>
		</div>
		<div class="clear"></div>
		<div style="background: lightgrey; height: 600px; margin-top: 40px; padding: 15px;">
			<div style="width:65%; background: white; height: 540px; margin: auto; padding-left: 350px;">
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<h3>订单编号：{{orderInfo.orderId}}</h3>
				<p>&nbsp;</p>
				<h3>订单金额：￥ {{orderInfo.totalPrice}}</h3>
				<hr />
				<div id="div1">
					<div id="payQrcodeDiv" style="width: 200px; height: 200px;"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="static/js/cookie_utils.js"></script>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="static/js/base.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#container",
			data: {
				orderInfo: {},
				isLogin: false,
				username: "",
			},
			//vue声明周期 ：  创建对象---beforeCreate---初始化data---created---加载模版---beforeMount---渲染数据---mounted
			created: function () {
				var token = getCookieValue("token");
				if (token != null && token != "") {
					this.isLogin = true;
					this.username = getCookieValue("username");
				}
				var jsonstr = localStorage.getItem("orderInfo");
				if (jsonstr != null) {
					localStorage.removeItem("orderInfo");
				}
				this.orderInfo = eval("(" + jsonstr + ")");
			},
			mounted: function () {
				//渲染二维码
				var qrcode = new QRCode($("#payQrcodeDiv")[0], {
					width: 200,
					height: 200
				});
				qrcode.makeCode(this.orderInfo.payUrl);

				//前端发送websocket连接请求
				var webSocketUrl = webSocketBaseUrl + "webSocket/" + this.orderInfo.orderId;
				var websocket = new WebSocket(webSocketUrl);
				//只要后端通过websocket向此连接发消息就会触发onmessage事件
				websocket.onmessage = function (event) {
					var msg = event.data;
					if (msg == "FINISH_PAY") {
						$("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
					}
				}
			}
		});
	</script>
</body>
</html>